'use client'

import { ReactNode } from 'react'
import { useParams } from 'next/navigation'
import { MicrophoneIcon } from '@heroicons/react/24/outline'

// 应用数据映射
const APP_DATA: Record<string, { name: string; icon: string; bgColor: string }> = {
  '1': { name: 'ChatGPT', icon: '🤖', bgColor: 'bg-blue-50' },
  '2': { name: 'Claude', icon: '🧠', bgColor: 'bg-purple-50' },
  '3': { name: 'Gemini', icon: '💫', bgColor: 'bg-green-50' },
  '4': { name: '通义千问', icon: '🌐', bgColor: 'bg-yellow-50' },
  '5': { name: '百川', icon: '🌊', bgColor: 'bg-cyan-50' },
  '6': { name: 'DeepResearch', icon: '🔍', bgColor: 'bg-red-50' },
  '7': { name: '写作助手', icon: '✍️', bgColor: 'bg-pink-50' },
  '8': { name: '翻译专家', icon: '🌏', bgColor: 'bg-indigo-50' },
  '9': { name: '代码助手', icon: '💻', bgColor: 'bg-orange-50' }
}

interface LayoutProps {
  children: ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const params = useParams()
  const appId = params.appId as string
  const appData = APP_DATA[appId] || { name: 'Unknown App', icon: '❓', bgColor: 'bg-gray-50' }

  return (
    <div className="relative flex h-full p-2">
      {/* 底层背景 */}
      <div className="absolute inset-0 bg-[#F3F4F6]" />
      
      {/* 聊天界面容器 */}
      <div className="relative w-full h-full flex p-8 bg-gray-200 backdrop-blur-sm rounded-2xl shadow-[0_0_24px_rgba(0,0,0,0.02)]">
        {/* 对话记录侧边栏 */}
        <div className="w-[260px] h-full flex flex-col">
          <div className="flex flex-col h-full">
            {/* 应用信息和新建对话按钮 */}
            <div className="p-4">
              {/* 应用信息 */}
              <div className="flex items-center gap-2 mb-3">
                <div className={`w-8 h-8 rounded-lg ${appData.bgColor} flex items-center justify-center text-xl shadow-sm`}>
                  {appData.icon}
                </div>
                <h2 className="text-sm font-medium text-gray-700">{appData.name}</h2>
              </div>
              {/* 新建对话按钮 */}
              <button className="w-full h-[72px] flex flex-col items-center justify-center gap-2 bg-white/90 rounded-xl border border-gray-200/50 hover:border-blue-200 hover:shadow-sm transition-all duration-200">
                <div className="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center">
                  <span className="text-xl text-blue-500">+</span>
                </div>
                <span className="text-sm font-medium text-gray-600">开启新对话</span>
              </button>
            </div>

            {/* 对话列表 */}
            <div className="flex-1 overflow-y-auto px-2 pb-2">
              <div className="space-y-1">
                <div className="px-3 py-2.5 bg-white/90 rounded-lg cursor-pointer hover:bg-white transition-colors">
                  <span className="text-sm text-gray-700">新的对话</span>
                </div>
              </div>
            </div>

            {/* 底部 Powered by */}
            <div className="p-3 flex items-center justify-between text-xs text-gray-400">
              <span>POWERED BY</span>
              <span className="font-medium">中科数字</span>
            </div>
          </div>
        </div>

        {/* 主聊天区域 */}
        <div className="flex-1 h-full pl-8 relative">
          <div className="flex-1 h-full bg-white rounded-2xl shadow-[0_0_24px_rgba(0,0,0,0.03)] border border-gray-100 overflow-hidden flex flex-col">
            {/* 聊天内容区域 */}
            <div className="flex-1 overflow-y-auto pb-20">
              {children}
            </div>
          </div>
          
          {/* 悬浮的消息输入区域 */}
          <div className="absolute bottom-6 left-14 right-6">
            <div className="relative flex items-center bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.08)] backdrop-blur-sm">
              <input
                type="text"
                placeholder="和机器人聊天"
                className="w-full h-12 pl-4 pr-24 bg-transparent rounded-xl outline-none"
              />
              <div className="absolute right-2 flex items-center gap-2">
                <button className="w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600">
                  <MicrophoneIcon className="w-5 h-5" />
                </button>
                <button className="w-8 h-8 flex items-center justify-center bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                  <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M3.105 2.289a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25h6.115a.75.75 0 010 1.5H5.135a1.5 1.5 0 00-1.442 1.086l-1.414 4.926a.75.75 0 00.826.95 28.896 28.896 0 0015.293-7.154.75.75 0 000-1.115A28.897 28.897 0 003.105 2.289z" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
